<template>
    <!-- 闭环率统计 -->
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">闭环管理</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>闭环率统计</span>
            </span>
        </div>

        <div class="content">
            <div class="selection">
                <el-date-picker v-model="startTime" type="date" placeholder="选择日期时间" style="width:200px"
                    value-format="yyyy-MM-dd" class="custom-select">
                </el-date-picker>
                <span style="font-size: 16px;color: white;margin: 0 10px">至</span>
                <el-date-picker v-model="endTime" type="date" placeholder="选择日期时间" style="width:200px"
                    value-format="yyyy-MM-dd" class="custom-select">
                </el-date-picker>

                <el-select v-model="countyName" @change="getTown" placeholder="县" style="width: 150px;margin: 0 5px"
                    class="custom-select">
                    <el-option v-for="item in countyOptions" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="townName" placeholder="镇" style="width: 150px;margin: 0 5px"
                    v-if="countyName !== '雅安'" class="custom-select" v-loading="TownLoading">
                    <el-option v-for="item in townNameOptions" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="type" placeholder="类型" style="width: 150px;margin: 0 5px" class="custom-select">
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="filterData">确定</el-button>

            </div>

            <div class="table">
                <el-table stripe ref="filterTable" :data="tableData" v-loading="loading"
                    :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                    max-height="750px">

                    <el-table-column prop="product_time" label="发布时间" align="center">
                    </el-table-column>
                    <el-table-column prop="product_area" label="发布区域" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="town" label="乡镇" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="now" label="now" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="itt30" label="30分钟内回执" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="itt120" label="2小时内回执" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="total" label="回执总数" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="total" label="发布数量" min-heigth="50px" align="center">
                    </el-table-column>
                    <el-table-column prop="confirmed" label="闭环率%" min-heigth="50px" align="center">
                    </el-table-column>

                </el-table>
            </div>
            <!-- <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"
                    background class="custom-pagination">
                </el-pagination>
            </div> -->
        </div>

    </div>
</template>

<script>
import Cookies from 'js-cookie';
// 引入闭环管理相关接口
import { reqClosed_loopRate, reqTown } from '@/api/closed_loop'
// 处理时间格式
import moment from 'moment';
export default {
    name: "closed_loop_rate",
    data() {
        return {
            date: '',
            selectedCity: '',
            selectedCounty: '',
            selectedTownship: '',
            search: '',
            // currentPage: 1,
            // pageSize: 10,
            // total: 57,

            //加载标志
            loading: false,
            TownLoading: false,
            // 表格数据
            tableData: [
                {
                    product_time: '',//发布时间
                    product_area: '',//发布区域
                    itt30: '',//30分钟内回执
                    itt60: '',//60分钟内回执
                    itt120: '',//2小时内内回执
                    total: '',//回执总数
                    confirmed: '',//闭环率
                }],
            // 类型选项
            typeOptions: [
                {
                    value: '地质灾害'
                },
                {
                    value: '山洪降水短临'
                },
                {
                    value: '地灾降水短临'
                },
                {
                    value: '山洪暴雨预警'
                },
                {
                    value: '地灾暴雨预警'
                },

            ],
            type: '地质灾害',
            //开始时间
            startTime: moment(new Date()).subtract(1, 'years').format('YYYY-MM-DD'),
            // 结束时间
            endTime: moment(new Date()).format('YYYY-MM-DD'),
            // 县
            countyName: Cookies.get('county'),
            // 地区选项
            countyOptions: Cookies.get('county') === '雅安' ? [
                {
                    value: '雅安',
                },
                {
                    value: '雨城'
                },
                {
                    value: '经开'
                },
                {
                    value: '名山'
                },
                {
                    value: '天全'
                },
                {
                    value: '芦山'
                },
                {
                    value: '宝兴'
                },
                {
                    value: '荥经'
                },
                {
                    value: '汉源'
                }, {
                    value: '石棉'
                },] : [{ value: Cookies.get('county') }],
            // 镇
            townName: '',
            townNameOptions: [],

        }
    },
    mounted() {
        this.getClosed_loopRateData()
        if (localStorage.getItem('county') !== '雅安') {
            this.getTown()
        }
    },
    methods: {
        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },
        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },

        // 获取闭环率统计表格数据
        async getClosed_loopRateData() {
            this.loading = true
            const result = await reqClosed_loopRate(this.type, this.countyName, this.townName, this.startTime, this.endTime)
            if (result.data.code === 200) {
                this.loading = false
                this.tableData = result.data.data
            }
            else {
                this.loading = false
                this.$message.error(result.msg)

            }

        },
        // 获取镇
        async getTown() {
            this.TownLoading = true
            this.townName = ''
            const result = await reqTown(this.countyName)
            this.townNameOptions = result.data.data
            this.TownLoading = false
        },
        // 筛选数据
        filterData() {
            this.getClosed_loopRateData(this.startTime, this.endTime, this.countyName, this.type)
        },


    },
}
</script>

<style scoped lang="scss">
.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}


// 滚动条样式
::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.container {
    width: 100%;



    .selection {
        width: 100%;

        margin-bottom: 20px;

    }

    .table {
        width: 100%;

    }

    .pagination {
        width: 100%;
        margin-top: 10px;
    }
}
</style>